<!-- 柱状图 -->
<template>
    <div class="barBox" ref="refBar"></div>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import * as echarts from 'echarts'

const refBar = ref(null)
const renderChart = () => {
    let myChart = echarts.init(refBar.value)
    let option = {
        tooltip: {
            trigger: 'item'
        },
        toolbox: {
            show: true,
            feature: {
                saveAsImage: { show: true }
            }
        },
        grid: {
            left: '4%',
            bottom: '10%',
            right: '2%'
        },
        xAxis: {
		    type: 'category',
		    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
		},
        yAxis: {
		    type: 'value'
		},
        series: [
		    {
                barWidth: '100px',
		        data: [120, 200, 150, 80, 70, 110, 130],
		        type: 'bar'
		    }
	    ]
    }
    myChart.setOption(option)
}

onMounted(() => {
    renderChart()
})
</script>

<style scoped lang="scss">
.barBox{
    width: 100%;
    height: 100%;
}
</style>